<template>
    <div class="wrapper">
        <h3 style="text-align: left">IsMode</h3>
        <button @click="show = false">销毁</button>
        <button @click="switchComponent('components/Com1')">组件1</button>
        <button @click="switchComponent('components/Com2')">组件2</button>
        <div class="a">
            <component :is="apps" v-if="show"></component>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Async',
    data() {
        return {
            show: false,
            apps: null
        };
    },
    methods: {
        switchComponent: function (component) {
            this.apps = () => import(`../${component}`);
            this.show = true;
        }
    }
};
</script>

<style scoped>
.wrapper {
    padding: 15px;
}

.a {
    text-align: left;
    height: 100px;
    border: 1px solid blue;
    margin-top: 20px;
}
</style>
